<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui 调试预览</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
  <style>用户图片
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<!-- 每列的行工具栏 -->
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-normal  layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="del">删除</a>
	</script>
	<!-- 头工具栏 -->
	<script type="text/html" id="headBar">
  		<a class="layui-btn layui-btn-normal" lay-event="add">添加</a>
  		<a class="layui-btn layui-btn-danger" lay-event="deleteBatch">批量 删除</a>
		<div class="layui-inline">
		<input type="text" name="ClazzName" data-type="reload" id="ClazzName" lay-verify="required" placeholder="按班级名查询学生信息" autocomplete="off" class="layui-input">
		</div>
		<button class="layui-btn layui-btn-sm" id="searchByClazz" lay-event="selectStudentByClazz">查询学生信息</button>
		<div class="layui-inline">
		<input type="text" name="studentName" id="MoHuStudent" lay-verify="required" placeholder="按姓名查询学生信息" autocomplete="off" class="layui-input">
		</div>
		<button class="layui-btn layui-btn-sm" id="searchByName" lay-event="selectStudentByName">查询学生信息</button>
	</script>
</body>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
//加载模块
layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
  //得到各种内置组件
  var layer = layui.layer //弹层
  ,laypage = layui.laypage //分页
  ,table = layui.table //表格
  ,$ = layui.$//jquery对象使用

  layer.msg('欢迎进入后台管理系统');

  //执行一个 table 实例
  table.render({
	  id:"usertable",
    elem: '#demo' //表格的id
    ,height: 600  //表格的高度
    ,url: '${pageContext.request.contextPath}/admin/AdminStudentListServlet'
    ,title: '用户表'
    ,page: true //开启分页 会默认帮我们向后端传递参数 page=1  limit=10
    ,toolbar: '#headBar' //自定义的头工具栏(将id引入)
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
      	//filed的值必须跟实体类的属性一样
        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'sn', title: '学号', width:150}
        ,{field: 'name', title: '姓名', width:300}
        ,{field: 'sex', title: '性别', width: 90, sort: true}

        ,{field: 'height', title: '身高', width: 120}
        ,{field: 'cid', title: '班级编号', width:200}
        ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
      ]]
  });
//监听头工具栏事件
  //test是监听的对应表格的 lay-filter的取值
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    //obj.event:头工具栏对应按钮的lay-event的值
    switch(obj.event){
      case 'add':
         layer.open({
        	title:"添加学生",
        	type:2,
        	content:"${pageContext.request.contextPath}/admin/AdminAddStudentServlet1",
         	area:["90%","90%"],
         	shade:0.8,
         	shadeClose:true
       	 })
      break;
      case 'deleteBatch':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          //获取选中的所有id
          var Ids = []
          //遍历所有选中的数据
          for(var i=0;i<data.length;i++){
        	  Ids.push(data[i].id)
          }
          $.ajax({
        	  url:"${pageContext.request.contextPath}/admin/deleteStudentBatch",
        	  type:"post",
        	  traditional:true,//ajax设置traditional:true可以像后端传递数组
        	  data:{
        		 Ids:Ids
        	  },success:function(res){
        		  alert(res.msg)
        	  	  //窗口重新加载
        		  window.location.reload();
       	      }
          })
        }
        break;
		case 'selectStudentByClazz':
			var clazzName = $('#ClazzName');
			// console.log(clazzName.val())
			//执行重载
			table.reload('usertable', {
				url: '${pageContext.request.contextPath}/admin/selectStudentByClazzName',
				method: 'post',
				page: {
					curr: 1
				}
				, where: {
					'clazzName': clazzName.val()
				}

			});
			break;
			case 'selectStudentByName':
				var studentName = $('#MoHuStudent');
				console.log(studentName.val())
				//执行重载
				table.reload('usertable', {
					url: '${pageContext.request.contextPath}/admin/selectStudentByStudentName',
					method: 'post',
					page: {
						curr: 1
					}
					, where: {
						'studentName': studentName.val()
					}

				});
				break;
    };
  });
  table.on('tool(test)', function(obj){
      var data = obj.data;
      switch(obj.event){
      case "edit":
      	 $.ajax({
               type: 'POST',
               url: "${pageContext.request.contextPath}/admin/AdmineditStudentServlet",//发送请求
               data:{ id:data.id},
               dataType: "html",
               success: function (result) {
                   var htmlCont = result;
                   layer.open({
                       type: 1,//弹出框类型
                       title: "编辑阶段",
                       shadeClose: true,
                       maxmin: true,
                       area:["90%","90%"],
                    	 shade:0.8,
                       content: htmlCont,
                       btn: ['确定','关闭'],
                       yes: function(index,layero){
                           var res = window["layui-layer-iframe" + index].callbackdata();
                         //  console.log(res);
			        		window.location.reload();
                               layer.close(index);
                         },
                         cancel: function(index, layero){
                      	   window.location.reload();

                      	     layer.close(index)
                      	   return false;
                      	 }
                   });
               }
           });
      break;
		case 'del':
			layer.confirm('真的要删除该学生吗？',function(index){
				layer.closeAll('dialog');
					$.ajax({
						url:'${pageContext.request.contextPath}/admin/delStudentById',
						type:'post',
						data:{'id':data.id},
						success:function(res){
							 alert(res.msg)
			        		  window.location.reload();
						}
					});
			});
		break;
      }
  });
})
</script>
</html>
